<template>
    <div>
        <!-- 修改密码 
:rules="[{ required: true, message: '请将输入原密码', trigger: 'blur' }]"
:rules="[{ required: true, message: '请将输入新密码', trigger: 'blur' }]"
-->
        <panel title="修改密码">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="原密码" prop="oldPwd">
                    <el-input v-model="ruleForm.oldPwd"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPwd">
                    <el-input type="password" v-model="ruleForm.newPwd" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="checkPass">
                    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>

        </panel>
    </div>
</template>

<script>
// import axios from '@/utils/request'
import { editpwdReq } from '@/api/account.api'
// import { checkoldpwdReq } from '@/api/account.api'
import { validatePass, validatePass2, checkOld } from '@/verification/validate';
export default {
    data() {
        // console.log(this, '-----------');



        return {
            ruleForm: {
                newPwd: '',
                checkPass: '',
                oldPwd: ''
            },
            rules: {
                pass: [
                    { validator: validatePass.bind(this), trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2.bind(this), trigger: 'blur' }
                ],
                oldPwd: [
                    { validator: checkOld, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        submitForm(formName) {
            // console.log(formName, '--------');
            this.$refs[formName].validate((valid) => {
                if (!valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

            editpwdReq(this.ruleForm).then((res) => {
                console.log(res);
                if (res.data.code == 0) {
                    this.$message({
                        message: '修改密码成功，请重新登录!',
                        type: 'success',
                    });
                    localStorage.removeItem('token')
                    this.$router.push('/login')
                }


            })
            // this.ruleForm
            // console.log(this.ruleForm.newPwd);

        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    // created() {
    //     checkoldpwdReq(this.ruleForm.oldPwd).then((res) => {
    //         console.log(res);
    //     })
    // }
}
</script>

<style lang="less" scoped>
.paw-btn {
    margin-left: 100px;
}
</style>